<template>
  <div class="f-all">
    <div class="f-zi">
      <span class="el-icon-arrow-left" style="font-size=15px,font-weight=600 " @click="tiaoHou()"></span>&nbsp;选择管理员
    </div>
    <div class="f-one">
      <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
        <el-form-item label="单位名称:">
          <el-select v-model="formInline.company_id" placeholder="全部">
            <el-option
              v-for="item in linput1"
              :key="item.company_id"
              :label="item.company_name"
              :value="item.company_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职务类型:">
          <el-select v-model="formInline.job_id" placeholder="全部">
            <el-option
              v-for="item in linput2"
              :key="item.job_id"
              :label="item.job_name"
              :value="item.job_id"
            >
              <!-- :label="item.id" -->
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班组名称:">
          <el-select v-model="formInline.group_id" placeholder="全部">
             <el-option
              v-for="item in linput3"
              :key="item.group_id"
              :label="item.group_name"
              :value="item.group_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="人员名称:">
          <el-input v-model="formInline.people_name" placeholder="人员名称"   class="padding"></el-input>
        </el-form-item>
        <el-form-item label="入场时间:">
          <el-date-picker
            v-model="formInline.people_started "
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="人员状态:">
          <el-input v-model="formInline.people_status " placeholder="人员名称" class="padding"></el-input>
        </el-form-item>
        <el-form-item>
          <!-- 模态框 -->
          <el-button type="primary" @click="submitForm('formInline')">查询</el-button>
          <!-- <template slot-scope="scope">
           
            <el-button size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
          </template>
          -->
          <!-- 模态框 -->
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="f-two">
      <el-table
        ref="multipleTable"
        border
        :data="currList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
      >
        <!-- <el-radio v-model="radio" label="1">备选项</el-radio> -->
        <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
        <!-- <el-table-column label="日期" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>-->
        <el-table-column prop="people_name" label="人员姓名" width="120" align="center"></el-table-column>
        <el-table-column prop="buildGroup.group_name" label="班组名称" align="center"></el-table-column>
        <el-table-column
          prop="buildJob.job_name"
          label="职务名称"
          show-overflow-tooltip
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="buildCompany.company_name"
          label="单位名称"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="people_started"
          label="入场时间"
          show-overflow-tooltip
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="people_sex"
          label="性别"
          show-overflow-tooltip
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span v-text="scope.row.people_sex=='0'?'女':'男'"></span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="people_status"
          label="入场状态"
          show-overflow-tooltip
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span
              :class="scope.row.people_status=='1'?'active':'native'"
            >{{ scope.row.people_status }}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="people_created" label="创建时间" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column property="do" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.$index, scope.row)">
              <span class="btn-zi">设为管理员</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 设为管理员模态框 -->
      <el-dialog title="设为管理员" :visible.sync="dialogFormVisible" width="425px">
        <el-form :model="form" ref="updataForm" :rules="rules">
          <!-- <el-form-item label="人员ID:" :label-width="formLabelWidth">
            <el-input v-model="form.people_id" autocomplete="off" :disabled="true"></el-input>
          </el-form-item> -->
          <el-form-item
            label="管理员用户名:"
            :label-width="formLabelWidth"
            prop="admin_account"
            class="el-add"
          >
            <el-input
              v-model="form.admin_account"
              autocomplete="off"
              @blur="yanzheng(form.admin_account)"
            ></el-input>
            <span class="f-add">{{this.failXin}}</span>
          </el-form-item>
          <el-form-item label="管理员密码:" :label-width="formLabelWidth" prop="admin_password">
            <el-input
              v-model="form.admin_password"
              autocomplete="off"
              @blur="checkPassword(form.admin_password)"
            ></el-input>
            <span class="f-add">{{this.failPass}}</span>
          </el-form-item>
          <el-form-item label="角色名:" :label-width="formLabelWidth">
            <el-select v-model="form.role_id" placeholder="全部">
              <el-option
                v-for="item in tableData"
                :key="item.role_id"
                :label="item.role_name"
                :value="item.role_id"
                :disabled="item.role_name==='超级管理员'?true:false"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注信息:" :label-width="formLabelWidth">
            <el-input v-model="form.admin_remark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="管理员状态:" :label-width="formLabelWidth">
            <el-select v-model="form.admin_state" placeholder="开启">
              <el-option label="开启" value="0"></el-option>
              <el-option label="禁用" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit('updataForm')" :disabled="isAble">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="f-block">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="tableData.length"
        :page-size="pageSize"
        @current-change="changePage"
      ></el-pagination>
    </div>

  </div>
</template>
<script>
import http from "../api";
export default {
  data() {
    return {
      // 按钮禁用
      // 搜索框
      linput1: [], //单位名称  单位类型
      linput2: [], //职务类型
      linput3:[],  //项目班组
      isAble: false,
      chuan: [],
      newChuan: {},
      multipleSelection: [],
      // 用户名验证传入的对象
      valueAdmin: {},
      valuecode: "",

      tableData: [],
      currPage: 1, //当前页
      currList: [], //当前展示的数据数组
      pageSize: 5,
      newData: [],
      //   表单
      formInline: {
        company_id: "",
        job_id: "",
        people_name: "",
        people_status: "",
        people_started: "",
        group_id: "",
      },
      // 模态框
      dialogTableVisible: false,
      dialogFormVisible: false,
      // 模态框传输的数据
      form: {
        people_id: "",
        admin_account: "",
        admin_password: "",
        role_id: "",
        admin_remark: "",
        admin_state: "",
      },
      formLabelWidth: "110px",
      // 失败信息
      failXin: "",
      failPass: "",
      rules: {
        // admin_account: [
        //   { required: true, validator: validatePass, trigger: "blur" },
        // ],
        // admin_password: [{ validator: password, tigger: "blur" }],
      },
    };
  },
  mounted() {
    http.AddSearch({}).then((r) => {
      if (r.code == 200) {
        console.log(r);
        this.tableData = r.data;
        console.log(r.data);
        // console.log(this.tableData);
        this.setCurrList(1);
      } else {
        alert("权限不足，无法查看");
      }
    });

    http.input1({}).then((res) => {
      console.log("单位", res.data);
      this.linput1 = res.data; //单位类型
    });
    http.input2({}).then((res) => {
      this.linput2 = res.data; //职务类型
      console.log("职务类型", res.data);
    });
     http.ryglxmbz1({}).then((res) => {
      this.linput3= res.data; //职务类型
      console.log("项目班组", res.data);
    });
   
  },
  methods: {
    // 验证密码正则
    checkPassword(value) {
      if (!value) {
        this.failPass = "密码不能为空";
        // alert('用户名不能为空');
      } else {
        this.failPass = "";
      }
    },
    // 验证用户名
    yanzheng(value) {
      //在valueAdmin对象里添加后天需要的属性名，并赋予它input框的值
      this.valueAdmin.admin_account = value;
      if (!value) {
        this.failXin = "请输入用户名";
        // alert("请输入用户名");
      } else {
        this.failXin = "";
        http
          .RepeatName(this.valueAdmin, {
            headers: { "Content-type": "application/json;charset=UTF-8" },
          })
          .then((r) => {
            this.valuecode = r.code;
            if (this.valuecode == 201) {
              this.failXin = "该用户已存在";
              this.isAble = true;
            } else {
              this.failXin = "";
              this.isAble = false;
            }
            console.log(this.valuecode);
            // alert("操作成功");
          });
      }
    },
    // 模态框里的提交
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isAble = false;
          http.Nextstep(this.form).then((r) => {
            console.log("添加", r);
            console.log(this.form);
            //  this.tableData=r.data
          });
          this.dialogFormVisible = true;
        } else {
          this.$message({
            showClose: true,
            message: "修改失败",
            type: "error",
          });
          return false;
        }
      });
      this.$router.push({
        name: "后台管理者页面",
      });
    },
    // 模态框下一步
    edit(index, row) {
      http.bottomInput({}).then((r) => {
        console.log("edit", r);
        this.tableData = r.data;
      });
      console.log(index, row);
      this.form.people_id = row.people_id;
      console.log(this.form.people_id);
      //打开对话框
      this.dialogFormVisible = true;
    },
    // 返回到后台管理页面
    tiaoHou() {
      this.$router.push({
        name: "后台管理者页面",
      });
    },
    // 查询按钮
    submitForm(formInline) {
      this.$refs[formInline].validate((valid) => {
        if (valid) {
          http.AddSearch(this.formInline).then((r) => {
            console.log(r);
            this.tableData = r.data;
            this.setCurrList(this.currPage);
            // alert("操作成功");
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 分页
    setCurrList(index) {
      console.log("当前页", index);
      // console.log(this.currPage.length)
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
    },
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);

      console.log(val);
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
      console.log(row);
    },
    handleCurrentChange(val) {
       this.currPage = val;
      // this.currentRow = val;
      console.log(val);
    },

    handleSelectionChange(val) {
      // this.multipleSelection = val;
      this.chuan = val;
      // console.log(val)
      console.log(this.chuan);
    },
  },
};
</script>
<style scoped>
/* 复选框单选 */
/* deep tr th.is-leaf .el-checkbox{
  display: none
}
 deep .el-checkbox__inner{
  border-radius :50%
} */
.f-add {
  display: block;
  margin-top: -10px;
  height: 14px;
  color: red;
  font-size: 13px;
}
.el-add {
}
.f-all {
  margin-top: 15px;
  width: 100%;
  /* height: 500px; */
  height: 645px;
  /* margin-left: 15px; */
  /* background-color: tomato; */
  background-color: white;
  overflow-y: scroll;
  position: relative;
  /* overflow-x: hidden; */
}
.f-zi {
  margin-top: 20px;
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 15px;
}
.f-one {
  margin-left: 30px;
  margin-top: 10px;
}
.f-two {
  width: 95%;
  margin-left: 30px;
}
.f-block {
  position: absolute;
  right: 1%;
  bottom: 5px;
  /* margin-left: 80%;
  margin-top: 15px; */
}
/* 小图标 */
.el-icon-arrow-left {
  cursor: pointer;
}

/* input框 */
.el-input >>> .el-input__inner {
  width: 185px;
  height: 30px;
  /* margin-top: -20px; */
  /* padding-left: 5px; */
  /* margin-left: 5px; */
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 185px;
}
/* .el-select >>> .el-input__inner {
  width: 185px;
  height: 30px;
  padding-left: 5px;
  
} */
.padding >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px !important;
}
.el-select >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px;
  /* margin-left: 5px; */
}
/* 按钮 */
.el-button {
  height: 32px;
  padding: 5px 15px;
}
/* 三元运算的启用和禁用 */
.active {
  color: green;
}
.native {
  color: red;
}
/* 模态框 */
.el-form >>> .el-form-item {
  margin-top: -10px;
  /* width: 100px; */
}
.dialog-footer {
  margin-top: -20px;
}
</style>